import React, {useState} from 'react';
import {Button, Form, Input, Modal, Select} from 'antd';
import {UserStore} from "../stores/user";
import {UserItem} from "../interface";


type Values = {
    title?: string;
    content?: string;
    ref_user?: number;
};

interface TaskModalProps {
    open: boolean;
    onCreate: (values: Values) => void;
    onUpdate: (id: number, values: Values) => void;
    close: () => void;
    currentRecord: any;
}


const TaskModal: React.FC<TaskModalProps> = (props) => {
    const userStore = UserStore();

    const [loading, setLoading] = useState(false);
    const {onCreate, currentRecord, onUpdate} = props;
    const [form] = Form.useForm();

    const handleOk = () => {
        form
            .validateFields()
            .then((values) => {
                if (currentRecord != null) {
                    onUpdate(currentRecord.id, values);
                } else {
                    onCreate(values);
                }
            })
            .catch((info) => {
                console.log('Validate Failed:', info);
            });

    };

    const handleCancel = () => {
        form.resetFields();
        props.close()
    };
    const handleChange = (value: string) => {
        console.log(`selected ${value}`);
    };

    const loadUserOption = () => {
        let options: any[] = [];
        userStore.dataList.forEach((it:UserItem) => {
                options.push({value: it.id, label: it.name},)
            }
        );
        return options;
    }
    return (
        <Modal
            open={props.open}
            title={currentRecord != null ? '编辑' : '新增'}
            onOk={handleOk}
            onCancel={handleCancel}
            footer={[
                <Button key="back" onClick={handleCancel}>
                    返回
                </Button>,
                <Button key="submit" type="primary" loading={loading} onClick={handleOk}>
                    保存
                </Button>,
            ]}
        >
            <Form preserve={false} form={form}>
                <Form.Item<Values>
                    label="任务标题"
                    name="title"
                    initialValue={currentRecord ? currentRecord.title : ''}
                    rules={[{
                        required: true,
                        message: 'Please input your task title!',
                    }]}
                >
                    <Input/>
                </Form.Item>
                <Form.Item<Values>
                    label="任务描述"
                    name="content"
                    initialValue={currentRecord ? currentRecord.content : ''}
                    rules={[{
                        required: true,
                        message: 'Please input your task content!',
                    }]}
                >
                    <Input/>
                </Form.Item>

                <Form.Item<Values>
                    label="分配用户"
                    initialValue={currentRecord ? currentRecord.ref_user : ''}
                    name="ref_user"
                    rules={[{
                        required: true,
                        message: 'Please input your task ref user!',
                    }]}
                >
                    <Select
                        defaultValue="lucy"
                        style={{width: 120}}
                        onChange={handleChange}
                        options={loadUserOption()}
                    />
                </Form.Item>
            </Form>

        </Modal>
    );
};

export default TaskModal;
